<template>
	<view id="footprintPage">
		<view class="product-item" @click="toDetail">
			<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
			<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
			<view class="product-con">
				<view class="goods-title">
					A580进口高速防滑传动带
				</view>
				<view class="goods-intro">
					尺寸:4120(mm)，材质:橡胶，样式:三角带
				</view>
				<view class="goods-footer">
					<view class="goods-price">
						<text class="unit">￥</text>
						<text class="val">299.00</text>
					</view>
					<view class="date">
						2019-08-15 12:00:00
					</view>
				</view>
			</view>
		</view>
		<view class="product-item" @click="toDetail">
			<image src="../../static/img/nav-arrow.png" class="nav-arrow" mode="aspectFill"></image>
			<image class="goods" src="../../static/img/goods.png" mode="aspectFill"></image>
			<view class="product-con">
				<view class="goods-title">
					A580进口高速防滑传动带
				</view>
				<view class="goods-intro">
					尺寸:4120(mm)，材质:橡胶，样式:三角带
				</view>
				<view class="goods-footer">
					<view class="goods-price">
						<text class="unit">￥</text>
						<text class="val">299.00</text>
					</view>
					<view class="date">
						2019-08-15 12:00:00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '../prodDetail/prodDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.product-item {
	height: 159upx;
	display: flex;
	padding:  44upx 31upx 39upx 24upx;
	position: relative;
	border-bottom: 1upx solid #F7F7F7;
}
.nav-arrow {
	position: absolute;
	top: 49upx;
	right: 31upx;
	width: 15upx;
	height: 29upx;
}
.goods {
	width: 159upx;
	height: 159upx;
	flex: 1 159upx 0;
}
.goods-longer {
	flex: 2 159upx 0;
	min-width: 159upx;
}
.product-con {
	flex: 3;
	padding-left: 23upx;
}
.goods-title {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	padding-top: 7upx;
}
.goods-intro {
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin-top: 10upx;
	
}
.goods-footer {
	font-size:24upx;
	font-weight:500;
	color:rgba(102,102,102,1);
	margin: 30upx 114upx 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.goods-price {
	font-size:34upx;
	font-weight:bold;
	color:rgba(234,10,42,1);
}
.unit {
	font-size: 24upx;
}
.date {
	transform: translateX(30upx);
}
</style>
